<script setup lang="ts">
import { reactive, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
const router = useRouter();
const store = useStore()

interface FormState {
  userName: string;
  userPassword: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  userName: '',
  userPassword: '',
  remember: true,
});

const login = async () => {
  try {
    await store.dispatch('user/login', formState)
    message.success('登录成功')
    router.push('/')
  }catch (e:any) {
    message.error(e.message)
    return
  }
}

</script>

<template>
<div class="login-container">
  <div class="mask">
    <a-row class="login-form-out">
      <a-col :xs="2" :sm="4" :md="24" :lg="24" :xl="12" :xxl="12" class="login-form-cus">
        <a-row class="row-form-container">
          <a-col class="left-form" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" :xxl="10">
            <img class="login-form-left-cover" src="@/assets/images/login-bg.png">
          </a-col>
          <a-col class="right-form" :xs="14" :sm="14" :md="14" :lg="14" :xl="14" :xxl="14">
            <div class="title-container"><h2 class="animate__animated animate__fadeInLeft">欢迎回来</h2></div>
            <a-form
                :model="formState"
                name="normal_login"
                class="login-form"
                layout="vertical"
            >
              <a-form-item
                  label="用户名"
                  name="userName"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
              >
                <a-input v-model:value="formState.userName">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item
                  label="密码"
                  name="userPassword"
                  :rules="[{ required: true, message: 'Please input your passWord!' }]"
              >
                <a-input-password v-model:value="formState.userPassword">
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>

              <a-form-item>
                <a-form-item name="remember" no-style>
                  <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                </a-form-item>
<!--                <a class="login-form-forgot" href="">Forgot password</a>-->
              </a-form-item>

              <a-form-item class="login-item">
                <a-button @click.prevent="login"
                          type="primary"
                          class="login-form-button">
                  Log in
                </a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</div>
</template>


<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-image: url("!@/assets/images/bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  .mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    animation: backdropFilter 3s infinite ease-out;
    .login-form-out {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      width: 100%;
      height: 100%;
      .login-form-cus {
        background-color: #fff;
        border-radius: 38px;
        max-width: 780px;
        box-shadow: 0px 0px 10px 3px #87878721;
        overflow: hidden;
        .row-form-container {
          overflow: hidden;
          .left-form {
            .login-form-left-cover {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
      .right-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
        padding: 12px 12px;
        font-weight: 800;
        overflow: hidden;
        .title-container {
          margin-bottom: 24px;
        }
        h2 {
          display: inline-block;
          position: relative;
          &:after {
            position: absolute;
            left: 0;
            bottom: 0;
            content: "";
            width:120%;
            height: 5px;
            transform: translateY(5px);
            background-color: #1677ff;
            border-radius: 20px 20px 0px 0px;
          }
        }
        .login-item {
          text-align: right;
        }
      }
    }
  }

  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }


  // @keyframes backdropFilter {
  //   0% {
  //     backdrop-filter: blur(100px);
  //   }
  //   50%{
  //     backdrop-filter: blur(50px);
  //   }
  //   100%{
  //     backdrop-filter: blur(100px);
  //   }
  // }
  // @-webkit-keyframes  backdropFilter {
  //   0% {
  //     backdrop-filter: blur(100px);
  //   }
  //   50%{
  //     backdrop-filter: blur(50px);
  //   }
  //   100%{
  //     backdrop-filter: blur(100px);
  //   }
  // }





    @keyframes backdropFilter {
    0% {
      backdrop-filter: blur(20px);
    }
    50%{
      backdrop-filter: blur(20px);
    }
    100%{
      backdrop-filter: blur(20px);
    }
  }
  // @-webkit-keyframes  backdropFilter {
  //   0% {
  //     backdrop-filter: blur(100px);
  //   }
  //   50%{
  //     backdrop-filter: blur(50px);
  //   }
  //   100%{
  //     backdrop-filter: blur(100px);
  //   }
  // }
}
</style>
